<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/shoppingCart.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/libs/layer/layer.js"></script>
</head>

<body>
    <div class="header">
        <div class="s_header">
            <div class="s_top">
                <h1>
                    <p>联系客服</p>
                    <a href="//www.winxuan.com">
                        <img src="./images/wenxuan/shoplog.png" alt=""></a>
                </h1>
                <div class="progress no"></div>
            </div>
            <div class="content">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>商品</th>
                            <th>名称</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th>总金额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tab">
            
                    </tbody>
                </table>
                <!-- <div class="empty">
                    <p class="follow">您的购物车是空的，赶紧去</p>
                    <div class="follow">
                        <div id="spe-services" fragment="2000" cachekey="nocache">
                            <p class="spe_services"> <a target="_blank" href="//www.winxuan.com/"
                                    title="">❤老客户回馈，积分换礼券，购书更实惠</a>
                            </p>
                        </div>
                    </div>
                    <p class="follow">看看吧</p>
                    <p>您也可以从<a href="//www.winxuan.com/front/customerfavorite/page" class="red">我的收藏</a>中取出商品</p>
                </div> -->
            </div>
            <div class="button-wrap">
                <p class="valid-tip" style="display: none;">
                    温馨提示：请至少选择一件商品，方可继续结算！
                </p>
                <a class="continue" href="./index.html">
                    <i><继续购物</i>
                    <b></b>
                </a>
                <a class="balance submit_btn" href="">
                    <i>结算</i>
                    <b></b>
                </a>
            </div>
        </div>
    </div>
</body>
<script>
    axios.defaults.baseURL = "";
    //请求拦截
    axios.interceptors.request.use((config) => {
        config.headers.token = localStorage.getItem("token");
        return config;
    });


    axios({
        url: "/cart/getCart"
    }).then(function (res) {
        console.log(res)
        render(res.data.data);
    })


    function render(data) {
        console.log(data)
        let str = ``
        data.forEach(el => {
            str += `
            <tr>
                <td scope="row">${el.c_id}</td>
                <td><img style="width:80px;height:80px" src='http://127.0.0.1:8080/${el.p_img}'></td>
                <td>${el.p_name}</td>
                <td> <button class='sub'>-</button>
                    <input class='num' value=${el.p_number}>
                    <button class='in'>+</button></td>
                <td>${el.p_price}</td>
                <td>${el.p_total}</td>
                <td> <a class='del'  c_id=${el.c_id}>删除</a> </td>
          </tr>
            `
        });
        $("#tab").html(str);
    }

    $(function () {

        $("#tab").on("click", '.sub', function () {

            if ($(this).next('.num').val() == 1) {
                return;
            }
            $(this).next('.num').val($(this).next('.num').val() - 1)
            totalROW(this)
        })

        $("#tab").on("click", '.in', function () {
            $(this).prev('.num').val(Number($(this).prev('.num').val()) + 1);
            totalROW(this)

        })

        //删除
        $("#tab").on("click", '.del', function () {

            let cId = $(this).attr("c_id");
            let data = new URLSearchParams();
            data.append("cid", cId);

            layer.confirm("您确定要删除吗?", {
                btn: ["yes", '容朕再想想']
            }, (index)=>{

                

                axios({
                    url: "/cart/deleteCart",
                    method: "post",
                    data
                }).then( (res)=>{
                    console.log(res)
                    layer.msg(res.data.msg);
                    layer.close(index);

                    $(this).parents("tr").remove();
                })

            }, function () {

            })





        })

        function totalROW(obj) {
            let num = $(obj).parents("tr").children("td").eq(3).children(".num").val();
            let price = $(obj).parents("tr").children("td").eq(4).text();
            $(obj).parents("tr").children("td").eq(5).text(num * price);

            let data = new URLSearchParams();
            data.append("cid", $(obj).parents("tr").children("td").eq(0).text());
            data.append("pnumber", num);
            axios({
                url: "/cart/modifyCart",
                method: "post",
                data
            }).then(function (res) {
                console.log(res)
                layer.msg(res.data.msg);
            })

        }
    })



</script>
</html>